<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息修改</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- css -->
    <style>
        #exampleInputAmount {
            width: 200px;
        }

        .form-inline {
            margin-bottom: 15px;
        }

        table tr th {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <!--  -->

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">信息修改</h3>
            </div>
            <div class="panel-body">
                <!--  -->

                <form action="" method="POST" role="form">
                    <legend>信息修改</legend>

                    <div class="form-group">
                        <label for="">姓名</label>
                        <input type="text" class="form-control" placeholder="请输入姓名" id="name">
                    </div>
                    <div class="form-group">
                        <label for="">年龄</label>
                        <input type="text" class="form-control" placeholder="请输入年龄" id="age">
                    </div>
                    <div class="form-group">
                        <label for="">技能</label>
                        <textarea type="text" class="form-control" placeholder="请输入技能" id="edu"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">头像</label>
                        <input type="text" class="form-control" placeholder="请输入头像地址" id="img">
                    </div>


                    <button type="submit" class="btn btn-primary btn-block" onclick="btnAmend()">提交</button>
                </form>


            </div>
        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        // URLSearchParams可以获取当前url中的search值,通过get方法
        var params = new URLSearchParams(window.location.search);
        var id = params.get('id');

        var nameTxt = document.querySelector('#name');
        console.log(imgTxt);
        var ageTxt = document.querySelector('#age');
        var eduTxt = document.querySelector('#edu');
        var imgTxt = document.querySelector('#img');
        axios.get('/api/v1/pets/' + id)
            .then(res => {
                nameTxt.value = res.data.info.name;
                ageTxt.value = res.data.info.age;
                eduTxt.value = res.data.info.edu;
                imgTxt.value = res.data.info.img;
            });

        function btnAmend() {

            // if (imgTxt && ageTxt && eduTxt & imgTxt) {
            axios.put('/api/v1/pets/' + id, {
                    name: nameTxt.value,
                    age: ageTxt.value,
                    edu: eduTxt.value,
                    img: imgTxt.value
                })
                .then(res => {
                    alert('修改成功');
                    window.location.href = "./index.html";
                });
            // }
        }
    </script>
</body>

</html>